<template>
  <div class="stock-detail-page">
    <!-- 头部导航 -->
    <div class="header">
      <div class="header-content">
        <button class="back-btn" @click="goBack">← 返回</button>
        <h1 class="header-title">{{ stock?.code }} - {{ stock?.name }}</h1>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="content">
      <!-- 股票基本信息 -->
      <div class="stock-info">
        <div class="info-item">
          <span class="label">当前价格:</span>
          <span class="value price">${{ stock?.price || 0 }}</span>
        </div>
        <div class="info-item">
          <span class="label">恐贪指数:</span>
          <span class="value" :class="getFearGreedClass(stock?.fearGreedIndex || 0)">
            {{ stock?.fearGreedIndex || 0 }}
          </span>
        </div>
        <div class="info-item">
          <span class="label">情绪状态:</span>
          <span class="value">{{ stock?.sentiment || '未知' }}</span>
        </div>
      </div>

      <!-- 图表区域 -->
      <div class="chart-section">
        <div v-if="historyLoading" class="loading">
          <div class="loading-spinner"></div>
          <div class="loading-text">{{ loadingText }}</div>
        </div>
        <div v-else-if="stockHistory.length > 0" class="chart-container">
          <!-- 数据详情面板 - 横向展示在图表上方 -->
          <div class="data-panel">
            <div class="panel-header">
              <span class="panel-title">📊 数据详情</span>
              <span v-if="selectedDate" class="selected-date">{{ selectedDate }}</span>
              <button 
                class="refresh-data-btn" 
                @click="refreshData" 
                :disabled="refreshLoading"
                :title="refreshLoading ? '正在刷新数据...' : '刷新恐贪指数数据'"
              >
                <span v-if="refreshLoading">🔄 刷新中...</span>
                <span v-else>🔄 刷新数据</span>
              </button>
            </div>
            <div v-if="selectedData" class="panel-content">
              <div class="data-item main-data">
                <span class="data-label">📅 日期</span>
                <span class="data-value date">{{ selectedData.date }}</span>
              </div>
              <div class="data-item main-data">
                <span class="data-label">💰 价格</span>
                <span class="data-value price">${{ selectedData.close_price?.toFixed(2) || 'N/A' }}</span>
              </div>
              <div class="data-item main-data">
                <span class="data-label">📊 恐贪指数</span>
                <span class="data-value" :style="{ color: getSentimentColor(selectedData.fear_greed_index) }">
                  {{ selectedData.fear_greed_index?.toFixed(2) || 'N/A' }}
                </span>
              </div>
              <div class="data-item">
                <span class="data-label">😊 情绪状态</span>
                <span class="data-value" :style="{ color: getSentimentColor(selectedData.fear_greed_index) }">
                  {{ getSentimentFromIndex(selectedData.fear_greed_index) }}
                </span>
              </div>
              <div class="data-item">
                <span class="data-label">💡 投资建议</span>
                <span class="data-value" :style="{ color: getAdviceColor(selectedData.fear_greed_index) }">
                  {{ getAdviceFromIndex(selectedData.fear_greed_index) }}
                </span>
              </div>
              <div class="data-item">
                <span class="data-label">📈 RSI指标</span>
                <span class="data-value">{{ selectedData.rsi?.toFixed(2) || 'N/A' }}</span>
              </div>
              <div class="data-item">
                <span class="data-label">📉 波动率</span>
                <span class="data-value">{{ selectedData.volatility?.toFixed(4) || 'N/A' }}</span>
              </div>
              <div class="data-item">
                <span class="data-label">📊 成交量比</span>
                <span class="data-value">{{ selectedData.volume_ratio?.toFixed(2) || 'N/A' }}</span>
              </div>
            </div>
            <div v-else class="panel-placeholder">
              <span>📊 点击图表上的点查看详细数据</span>
            </div>
          </div>
          
          <!-- 图表容器 -->
          <div class="chart-wrapper">
            <div class="chart-header">
              <span class="chart-title">📈 历史趋势图表 (过去一年)</span>
              <div class="chart-info">
                <span class="chart-tip">💡 点击图表上的点查看详细数据</span>
                <span class="data-points">📊 显示 {{ filteredData ? filteredData.length : 0 }} 个数据点 (每天一个)</span>
              </div>
            </div>
            <VChart 
              class="chart" 
              :option="chartOption" 
              @click="handleChartClick"
              @mouseover="handleMouseOver"
              @mouseout="handleMouseOut"
            />
          </div>
        </div>
        <div v-else class="no-data">
          <div class="no-data-content">
            <div class="no-data-icon">📊</div>
            <div class="no-data-text">暂无历史数据</div>
            <div class="no-data-desc">数据库中暂无该股票的已计算数据</div>
            <button class="calculate-btn" @click="calculateData" :disabled="historyLoading">
              <span v-if="historyLoading">计算中...</span>
              <span v-else>🔄 开始计算数据</span>
            </button>
          </div>
        </div>
      </div>

      <!-- 历史数据摘要 -->
      <div v-if="stockHistory.length > 0" class="history-summary">
        <div class="summary-item">
          <span class="label">数据点数:</span>
          <span class="value">{{ stockHistory.length }}</span>
        </div>
        <div class="summary-item">
          <span class="label">时间范围:</span>
          <span class="value">{{ stockHistory[0]?.date }} 至 {{ stockHistory[stockHistory.length-1]?.date }} (过去一年)</span>
        </div>
        <div class="summary-item">
          <span class="label">最高价格:</span>
          <span class="value">${{ Math.max(...stockHistory.map(item => item.close_price)).toFixed(2) }}</span>
        </div>
        <div class="summary-item">
          <span class="label">最低价格:</span>
          <span class="value">${{ Math.min(...stockHistory.map(item => item.close_price)).toFixed(2) }}</span>
        </div>
        <div class="summary-item">
          <span class="label">计算说明:</span>
          <span class="value">基于2年数据计算，显示1年趋势</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from 'echarts/components'
import VChart from 'vue-echarts'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
])

const router = useRouter()
const route = useRoute()

// 响应式数据
const stock = ref(null)
const stockHistory = ref([])
const historyLoading = ref(false)
const loadingText = ref('加载中...')
const refreshLoading = ref(false)
const selectedData = ref(null)
const selectedDate = ref('')
const filteredData = ref([])
const chartOption = ref({})

// 获取恐贪指数颜色类
const getFearGreedClass = (index) => {
  if (index >= 60) return 'extreme-greed'
  if (index >= 40) return 'greed'
  if (index >= 20) return 'slight-greed'
  if (index >= -20) return 'neutral'
  if (index >= -40) return 'fear'
  if (index >= -60) return 'extreme-fear'
  return 'extreme-fear'
}

// 根据恐贪指数获取情绪状态
const getSentimentFromIndex = (index) => {
  if (index >= 60) return "极度贪婪"
  if (index >= 40) return "贪婪"
  if (index >= 20) return "轻微贪婪"
  if (index >= -20) return "中性"
  if (index >= -40) return "恐惧"
  if (index >= -60) return "极度恐惧"
  return "极度恐惧"
}

// 根据恐贪指数获取投资建议
const getAdviceFromIndex = (index) => {
  if (index >= 60) return "批量卖出"
  if (index >= 40) return "谨慎持有"
  if (index >= 20) return "观望"
  if (index >= -20) return "中性"
  if (index >= -40) return "逐步买入"
  if (index >= -60) return "分批买入"
  return "长期买入"
}

// 获取情绪颜色
const getSentimentColor = (index) => {
  if (index >= 60) return "#389e0d" // 极度贪婪 - 深绿
  if (index >= 40) return "#52c41a" // 贪婪 - 绿色
  if (index >= 20) return "#95de64" // 轻微贪婪 - 浅绿
  if (index >= -20) return "#faad14" // 中性 - 黄色
  if (index >= -40) return "#ff7875" // 恐惧 - 浅红
  if (index >= -60) return "#ff4d4f" // 极度恐惧 - 红色
  return "#ff4d4f" // 极度恐惧 - 红色
}

// 获取建议颜色
const getAdviceColor = (index) => {
  if (index >= 60) return "#cf1322" // 卖出 - 深红
  if (index >= 40) return "#fa8c16" // 谨慎 - 橙色
  if (index >= 20) return "#faad14" // 观望 - 黄色
  if (index >= -20) return "#666666" // 中性 - 灰色
  if (index >= -40) return "#52c41a" // 买入 - 绿色
  if (index >= -60) return "#389e0d" // 分批买入 - 深绿
  return "#237804" // 长期买入 - 深绿
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 图表点击事件处理
const handleChartClick = (params) => {
  if (params.componentType === 'series') {
    const dataIndex = params.dataIndex
    if (dataIndex >= 0 && dataIndex < filteredData.value.length) {
      const clickedData = filteredData.value[dataIndex]
      selectedData.value = clickedData
      selectedDate.value = clickedData.date
      
      // 更新股票基本信息
      if (stock.value) {
        stock.value.price = clickedData.close_price
        stock.value.fearGreedIndex = clickedData.fear_greed_index
        stock.value.sentiment = getSentimentFromIndex(clickedData.fear_greed_index)
      }
      
      console.log('点击数据:', clickedData)
    }
  }
}

// 鼠标悬停事件处理
const handleMouseOver = (params) => {
  if (params.componentType === 'series') {
    console.log('鼠标悬停在数据点上:', params)
  }
}

// 鼠标移出事件处理
const handleMouseOut = (params) => {
  console.log('鼠标移出图表:', params)
}

// 渲染历史图表
const renderHistoryChart = () => {
  if (stockHistory.value.length === 0) {
    return
  }
  
  try {
    // 准备数据 - 每天取一个点
    const data = stockHistory.value
    filteredData.value = []
    
    // 每天取一个数据点（显示所有数据）
    filteredData.value = [...data]
    
    const dates = filteredData.value.map(item => item.date)
    const fearGreedValues = filteredData.value.map(item => item.fear_greed_index)
    const prices = filteredData.value.map(item => item.close_price)
    
    // 配置选项
    chartOption.value = {
      title: {
        text: `${stock.value?.code} 历史趋势`,
        left: 'center',
        textStyle: {
          fontSize: 18,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'axis',
        formatter: function(params) {
          const data = params[0]
          const dataIndex = data.dataIndex
          const clickedData = filteredData.value[dataIndex]
          if (clickedData) {
            return `
              <div style="padding: 8px;">
                <div><strong>日期:</strong> ${clickedData.date}</div>
                <div><strong>价格:</strong> $${clickedData.close_price?.toFixed(2)}</div>
                <div><strong>恐贪指数:</strong> ${clickedData.fear_greed_index?.toFixed(2)}</div>
                <div><strong>情绪:</strong> ${getSentimentFromIndex(clickedData.fear_greed_index)}</div>
              </div>
            `
          }
          return ''
        }
      },
      legend: {
        data: ['价格', '恐贪指数'],
        top: 40,
        textStyle: {
          fontSize: 12
        }
      },
      grid: {
        left: '10%',
        right: '10%',
        bottom: '15%',
        top: '15%'
      },
      xAxis: {
        type: 'category',
        data: dates,
        axisLabel: {
          formatter: function(value) {
            return value.substring(5) // 只显示月-日
          },
          fontSize: 10
        }
      },
      yAxis: [
        {
          type: 'value',
          name: '价格 ($)',
          position: 'left',
          axisLabel: {
            formatter: '${value}',
            fontSize: 10
          }
        },
        {
          type: 'value',
          name: '恐贪指数',
          position: 'right',
          min: -100,
          max: 100,
          axisLabel: {
            formatter: '{value}',
            fontSize: 10
          }
        }
      ],
      series: [
        {
          name: '价格',
          type: 'line',
          yAxisIndex: 0,
          data: prices,
          color: '#52c41a',
          smooth: true,
          lineStyle: {
            width: 2
          },
          symbol: 'circle',
          symbolSize: 8,
          emphasis: {
            symbolSize: 12,
            itemStyle: {
              color: '#52c41a',
              borderColor: '#fff',
              borderWidth: 3
            }
          }
        },
        {
          name: '恐贪指数',
          type: 'line',
          yAxisIndex: 1,
          data: fearGreedValues,
          color: '#1890ff',
          smooth: true,
          lineStyle: {
            width: 2
          },
          symbol: 'circle',
          symbolSize: 8,
          emphasis: {
            symbolSize: 12,
            itemStyle: {
              color: '#1890ff',
              borderColor: '#fff',
              borderWidth: 3
            }
          }
        }
      ]
    }
    
  } catch (error) {
    console.error('图表渲染失败:', error)
  }
}

// 获取历史数据
const fetchHistoryData = async () => {
  if (!stock.value?.code) return
  
  historyLoading.value = true
  loadingText.value = '正在加载历史数据...'
  stockHistory.value = []
  
  try {
    // 策略：直接从数据库获取已计算好的数据，提高响应速度
    // 如果数据库中没有数据，会返回空数组，前端会显示相应提示
    const response = await fetch(`/api/fear-greed/database-data?symbol=${stock.value.code}&days=430`)
    const data = await response.json()
    
    if (data.success) {
      if (data.data && data.data.length > 0) {
        // 只取过去一年的数据用于显示
        const oneYearAgo = new Date()
        oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1)
        const oneYearAgoStr = oneYearAgo.toISOString().split('T')[0]
        
        // 过滤出过去一年的数据
        stockHistory.value = data.data.filter(item => item.date >= oneYearAgoStr)
        
        // 设置最新数据为默认显示
        if (stockHistory.value.length > 0) {
          const latestData = stockHistory.value[stockHistory.value.length - 1]
          selectedData.value = latestData
          selectedDate.value = latestData.date
        }
        
        console.log(`✅ 从数据库获取到 ${stock.value.code} 的数据，共 ${data.data.length} 条记录`)
      } else {
        console.log(`ℹ️ 数据库中暂无 ${stock.value.code} 的已计算数据`)
        // 可以在这里添加提示用户数据需要计算的逻辑
      }
    } else {
      console.error('获取数据库数据失败:', data)
    }
  } catch (error) {
    console.error('获取数据库数据失败:', error)
  } finally {
    historyLoading.value = false
    loadingText.value = '加载中...'
    renderHistoryChart()
  }
}

// 刷新恐贪指数数据
const refreshData = async () => {
  if (!stock.value?.code) return
  
  refreshLoading.value = true
  historyLoading.value = true
  loadingText.value = '正在刷新数据...'
  
  try {
    console.log(`🔄 开始刷新 ${stock.value.code} 的恐贪指数数据...`)
    
    // 调用修复数据API
    const response = await fetch(`/api/fear-greed/fix-data?symbol=${stock.value.code}&force_recalculate=true&days=365`)
    const data = await response.json()
    
    if (data.success) {
      console.log(`✅ 数据刷新成功:`, data.message)
      
      // 重新获取数据
      await fetchHistoryData()
    } else {
      console.error('数据刷新失败:', data.message)
    }
  } catch (error) {
    console.error('数据刷新失败:', error)
  } finally {
    refreshLoading.value = false
    historyLoading.value = false
    loadingText.value = '加载中...'
  }
}

// 手动触发数据计算
const calculateData = async () => {
  if (!stock.value?.code) return
  
  historyLoading.value = true
  loadingText.value = '正在计算数据...'
  stockHistory.value = []
  
  try {
    console.log(`🔄 开始计算 ${stock.value.code} 的数据...`)
    
    const response = await fetch(`/api/fear-greed/calculate-data?symbol=${stock.value.code}&days=430`, {
      method: 'POST'
    })
    const data = await response.json()
    
    if (data.success) {
      console.log(`✅ 数据计算成功，共 ${data.data.length} 条记录`)
      
      // 只取过去一年的数据用于显示
      const oneYearAgo = new Date()
      oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1)
      const oneYearAgoStr = oneYearAgo.toISOString().split('T')[0]
      
      // 过滤出过去一年的数据
      stockHistory.value = data.data.filter(item => item.date >= oneYearAgoStr)
      
      if (stockHistory.value.length > 0) {
        const latestData = stockHistory.value[stockHistory.value.length - 1]
        selectedData.value = latestData
        selectedDate.value = latestData.date
      }
    } else {
      console.error('数据计算失败:', data.message)
    }
  } catch (error) {
    console.error('数据计算失败:', error)
  } finally {
    historyLoading.value = false
    loadingText.value = '加载中...'
    renderHistoryChart()
  }
}

// 页面初始化
onMounted(async () => {
  // 从路由参数获取股票信息
  const stockData = route.params.stock
  if (stockData) {
    stock.value = JSON.parse(decodeURIComponent(stockData))
    await fetchHistoryData()
  }
})
</script>

<style scoped>
.stock-detail-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.header {
  background: white;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.back-btn {
  background: none;
  border: none;
  font-size: 16px;
  color: #1890ff;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 4px;
  transition: background 0.3s;
}

.back-btn:hover {
  background: #f0f8ff;
}

.header-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.content {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.stock-info {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 40px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item .label {
  font-size: 14px;
  color: #666;
}

.info-item .value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.info-item .value.price {
  color: #52c41a;
}

.chart-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: 600px;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 500px;
  color: #666;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #1890ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

.loading-text {
  color: #666;
  font-size: 14px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
  color: #999;
  font-size: 16px;
}

.no-data-content {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.no-data-icon {
  font-size: 48px;
  margin-bottom: 10px;
}

.no-data-text {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.no-data-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.calculate-btn {
  background: #1890ff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.calculate-btn:hover:not(:disabled) {
  background: #40a9ff;
}

.calculate-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  color: #888;
}

.chart-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.data-panel {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.refresh-data-btn {
  background: linear-gradient(135deg, #1890ff, #096dd9);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.3);
}

.refresh-data-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #40a9ff, #1890ff);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(24, 144, 255, 0.4);
}

.refresh-data-btn:disabled {
  background: #d9d9d9;
  color: #999;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.refresh-data-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.3);
}

.panel-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.selected-date {
  font-size: 14px;
  color: #1890ff;
  font-weight: 500;
}

.panel-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.data-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.data-item:hover {
  background: #e6f7ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
}

.data-item.main-data {
  background: linear-gradient(135deg, #1890ff 0%, #52c41a 100%);
  color: white;
  border: 2px solid #1890ff;
  font-weight: 600;
}

.data-item.main-data .data-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}

.data-item.main-data .data-value {
  color: white;
  font-size: 18px;
  font-weight: 700;
}

.data-item.main-data .data-value.price {
  color: #fff;
}

.data-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  margin-bottom: 6px;
}

.data-value {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.data-value.price {
  color: #52c41a;
}

.data-value.date {
  color: #1890ff;
  font-weight: 600;
}

.panel-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  color: #999;
  font-size: 14px;
  text-align: center;
}

.chart-wrapper {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart {
  width: 100%;
  height: 500px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.chart-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.chart-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.chart-tip {
  font-size: 12px;
  color: #999;
  font-style: italic;
}

.data-points {
  font-size: 11px;
  color: #1890ff;
  font-weight: 500;
}

.history-summary {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 6px;
}

.summary-item .label {
  font-weight: 600;
  color: #666;
  font-size: 14px;
}

.summary-item .value {
  font-weight: 600;
  color: #333;
  font-size: 16px;
}

/* 恐贪指数颜色样式 */
.extreme-fear { background: #ff4d4f; color: white; }
.fear { background: #ff7875; color: white; }
.slight-fear { background: #ffa39e; color: white; }
.neutral { background: #faad14; color: white; }
.slight-greed { background: #95de64; color: white; }
.greed { background: #52c41a; color: white; }
.extreme-greed { background: #389e0d; color: white; }
</style>
